import React, { useCallback, useState } from 'react'

let Child = (props)=>{
  console.log('Child 被执行了');
  return (<div>
    Child - {props.info.name} -- {props.info.age}
  </div>)
}

Child = React.memo(Child)

const App = () => {

    const [count,setCount] = useState(100)

    const [name,setName] = useState('张三')
    const [age] = useState(18)

    /*
      如果说给子组件传递一个对象，那么当 count 值发生改变的时候，就会导致 info
      被重新定义，那么当重新定义后就会得到一个新的对象，那么子组件发现这个对象和
      之前缓存的对象不一样，就会重新执行 Child 子组件
    */ 
    const info = {
      name,
      age
    }

    return (
      <div >

        <h1>{count}</h1>
        <button onClick={()=>{
          setCount(count + 1)
        }}> 点击加 1 </button>
        <hr />

        <Child info={info}  />
      </div>
  )
}

export default App